<template>
    <div class="main-content">
        <a-card>
            <a-tabs>
                <a-tab-pane key="1" title="资源">
                    <div>
                        <a-radio-group default-value="1" v-model:model-value="auditStatus" @change="changeRadio">
                            <a-divider direction="vertical" />
                            <a-radio value="1">
                                <template #radio="{ checked }">
                                    <a-tag :checked="checked" checkable size="large" color="arcoblue">已发布</a-tag>
                                </template>
                            </a-radio>
                            <a-divider direction="vertical" />
                            <a-radio value="0">
                                <template #radio="{ checked }">
                                    <a-tag :checked="checked" checkable size="large" color="arcoblue">审核中</a-tag>
                                </template>
                            </a-radio>
                            <a-radio value="-1">
                                <template #radio="{ checked }">
                                    <a-tag :checked="checked" checkable size="large" color="arcoblue">未通过</a-tag>
                                </template>
                            </a-radio>
                        </a-radio-group>
                    </div>
                    <div class="list-container">
                        <div class="list-item" v-for="(i, k) in dataList">
                            <div class="item-info">
                                <div class="item-title">{{ i.title }}</div>
                                <div class="item-sub-title">{{ i.summary }}</div>
                                <div class="item-date">更新日期：{{ formDate(i.updateTime) }}</div>
                                <div class="item-audit">资源状态：
                                    <a-tag color="red" v-if="i.status === -1">未通过审核</a-tag>
                                    <a-tag color="arcoblue" v-else-if="i.status === 0">审核中</a-tag>
                                    <a-tag color="green" v-if="i.status === 1">已通过审核</a-tag>
                                </div>
                            </div>
                            <div class="item-action">
                                <div class="btn">
                                    <a-tooltip content="下载">
                                        <a-button type="text" shape="circle" size="large" :style="{ color: '#434343' }"
                                            @click="downloadResource(i.id)">
                                            <template #icon>
                                                <icon-to-bottom :size="20" />
                                            </template>
                                        </a-button>
                                    </a-tooltip>
                                </div>
                                <div class="btn">
                                    <a-popconfirm content="该操作不可恢复，是否要删除您上传的资源?" type="error" position="tr"
                                        @ok="confirmDel(i.id)">
                                        <a-button type="text" shape="circle" size="large" :style="{ color: '#434343' }">
                                            <template #icon>
                                                <icon-delete :size="20" />
                                            </template>
                                        </a-button>
                                    </a-popconfirm>
                                </div>
                            </div>
                        </div>
                        <a-empty v-if="dataList.length === 0"></a-empty>
                    </div>
                    <div class="data-pagination">
                        <a-pagination :total="totalData" show-total :current="currentPage" :page-size="pageSize"
                            @change="changePage" />
                    </div>
                </a-tab-pane>

            </a-tabs>
        </a-card>
    </div>
</template>

<script>
import {
    IconUser,
    IconEdit,
    IconArrowRise,
    IconDelete,
    IconEye,
    IconToBottom,
} from '@arco-design/web-vue/es/icon';
import { reactive, ref } from 'vue';
import { userStore } from '@/store/userStore';
import { Message } from '@arco-design/web-vue';
import { getUserResourceList } from '@/api/percenalApi'
import { deleteResource } from '@/api/adminResourceApi'
import { downloadFile } from '@/api/resourceApi'
import TimeUtils from '@/utils/timeUtils'
export default {
    components: {
        IconUser,
        IconEdit,
        IconArrowRise,
        IconDelete,
        IconEye,
        IconToBottom
    },
    setup() {
        const dataList = ref([])
        const currentPage = ref(1)
        const pageSize = ref(5)
        const totalData = ref(50)
        const user = userStore()
        const auditStatus = ref('1')
        const confirmDel = async (id) => {
            const res = await deleteResource(id)
            if (res.data.code === 100) {
                Message.success('删除成功')
                getDataList()
            } else {
                Message.error(res.data.msg)
            }
        }
        const changePage = (page) => {
            currentPage.value = page
            getDataList()
        }
        const changeRadio = (value) => {
            auditStatus.value = value
            getDataList()
        }
        const getDataList = async () => {
            const v = {
                audit: auditStatus.value,
                userId: user.userId,
                pageNum: currentPage.value,
                pageSize: pageSize.value
            }
            const res = await getUserResourceList(v)
            if (res.data.code === 100) {
                dataList.value = res.data.data.list
                totalData.value = res.data.data.total
            } else {
                Message.error(res.data.msg)
                dataList.value = []
                totalData.value = 0
            }
        }
        const formDate = (date) => {
            return TimeUtils.formatTime(date)
        }
        const downloadResource = async (id) => {
            const uid = user.userId
            const v = {
                userId: uid,
                fileId: id
            }
            const response = await downloadFile(v)
            console.log(response);
            // 将响应数据转换成 Blob 对象
            const blob = new Blob([response.data], { type: response.headers['content-type'] });
            // 创建 URL 和下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            // 设置链接的下载属性为服务端返回的文件名
            a.download = response.headers['content-disposition'] ? response.headers['content-disposition'].split('filename=')[1].replace(/^"(.*)"$/, '$1') : 'download';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
        getDataList()
        return {
            currentPage,
            pageSize,
            totalData,
            changePage,
            dataList,
            formDate,
            changeRadio,
            downloadResource,
            auditStatus,
            confirmDel
        }
    },
    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
@md: 1300px;

.list-container {
    padding: 1rem;
    min-height: calc(100vh - 325px);

    .list-item {
        padding: 1rem;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;

        .item-action {
            display: flex;
            gap: 1rem;

            .btn {
                cursor: pointer;
            }
        }

        .item-info {
            .item-title {
                font-size: 18px;
                margin-bottom: .8rem;
            }

            .item-sub-title {
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
                line-height: 22px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }

            .item-date {
                font-size: 13px;
                color: #999;
                margin-bottom: 5px;
            }

            .item-audit {
                font-size: 13px;
                color: #999;
            }
        }
    }
}

.data-pagination {
    display: flex;
    justify-content: flex-end;
    margin: 0 1rem 1rem 0;
}

.main-content {
    margin: 21px 3rem 2rem 0rem;
}

@media (max-width: @md) {
    .main-content {
        margin: 21px 1rem 2rem 1rem;
    }
}
</style>